<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        width: 600px;
        height: 400px;
        border: 10px solid #333;
        margin: 30px auto;
        display: flex;
        flex-direction: column;
    }

    .header {
        height: 40px;
        display: flex;
        line-height: 40px;
    }

    .header div {
        flex: 1;
        background-color: hotpink;
        text-align: center;
        font-size: 36px;
        color: white;
    }

    .header .active {
        background-color: orange;
    }

    .content {
        display: none;
    }
</style>
<div class="container">
    <div class="header">
        <div class="active">热卖</div>
        <div>精品</div>
        <div>推荐</div>
    </div>
    <div class="body">
        <div class="content" style="display: block;">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>

</div>
<body>
    <script>
         /*
            实现思路，在页面布局上导航上每一个div与正文是存在对应关系
            当用户点击导航上每一个div时，将当前点击的div对应的颜色进行设置 然后需要将当前点击对应的正文部分进行显示
        */
        var headerDoms = document.querySelectorAll('.header>div');
        var contentDoms = document.querySelectorAll('.body>.content');
        var length = headerDoms.length;
        console.log(headerDoms);
        for (var i = 0; i < length; i++) {
            // 每一个导航栏上div增加属性记录序号
            // headerDoms[i].setAttribute('data-index',i);
            // 是向dom对象中index记录序号 后期可以使用dom对象取得序号
            headerDoms[i].index = i;
            headerDoms[i].onclick = function(){
                // 当前点击的div对应的颜色进行设置
                // 使用排他思想  不论active样式在谁身上 所有的div全部移除 最后将当前的添加
                for(var j = 0;j<length;j++){
                    headerDoms[j].className = '';
                }
                // document.querySelector('.header>active').className ='';
                this.className = 'active';
                // 当前点击对应的正文部分进行显示
                // 先将所有的正文隐藏
                for(var j = 0;j<length;j++){
                    contentDoms[j].style.display = 'none';
                }
                // 当前对应的正文需要显示
                // contentDoms[this.getAttribute('data-index')].style.display = 'block'
                contentDoms[this.index].style.display = 'block'

            }
        }
    </script>
</body>
</html>